<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
		<title></title>
		<link href="../../dist/css/lanai-ui.min.css" rel="stylesheet" />
	</head>
	<body>
		<section class="content no-padding">			
			<div class="box box-widget no-shadow">
				<div class="box-body">
					<blockquote class="bg-gray-light blockquote-success">
						注意 : 提供两种主要布局(此Demo提供的是左右式布局)
						
						<small>查看<a href="#">上下式布局</a></small></blockquote>
						
					<div class="row">
						<div class="col-sm-6">
							<h3>上下式布局</h3>
							<p>
								在页面代码<code>body</code>样式中增加<code>.layout-top-nav</code>样式
							</p>
							<a href="../../top_nav.html" target="_blank">
							<img src="../../dist/img/demo2.png" class="img-responsive" /></a>
						</div>						
						<div class="col-sm-6">
							<h3>左右式布局</h3>
							<p> 在页面代码<code>body</code>中使用<code>.hold-transition .skin-blue .layout-top-nav</code></p>
							<img src="../../dist/img/demo1.png" class="img-responsive" />
						</div>
					</div>
				</div>
			</div>
		</section>
	</body>
	<script src="../../dist/js/jquery.min.js"></script>
    <script src="../../dist/js/lanai-ui.min.js"></script>
</html>
